<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vuejs</title>
</head>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../vue.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->

<body>
  <div id="app">
    <p>{{msg}}</p>
    <p>{{number+1}}</p>
    <p  v-on:click="reverse">{{sb}}</p>
  </div>
</body>
<script>

  let vm = new Vue({
    el: "#app",
    data() {
      return {
        msg: "hhhh",
        number: 0,
        sb: "傻不傻啊你"
      }
    },
    methods: {
      reverse: function () {
        this.sb = this.sb.split('').reverse().join('')
      }
    }
  })



  console.log(Vue);
  console.log(new Vue());
  //vue实列的作用范围 el选项命中的元素 及其 内部的后代元素
  // 不仅仅可以使用id选择器也可以使用其他选择器
  // 可以设置除div以外的其他元素 不能设置html和body 尽量设置div 因为其他元素有默认样式
  //vue指令
  // vue.text 设置标签内的文本值
  // vue.html 设置标签内的innerhtml
    //如何使用
  //当需要用其他标签渲染页面时用 v-html 用来设置元素的innerHTML 设置的内容 有标签则会解析标签
  //仅仅写入文本 使用 v-text  仅仅只会解析成文本
  //v-on 为元素绑定事件
  //V-show 通过display 属性控制元素的显示与隐藏
  //v-if  直接操作dom树 为true则显示 为flase 消失
  //v-for
  //v-model //表单双向数据绑定
</script>

</html>